<template>
  <v-container
    class="green lighten-2"
    style="position:fixed;top:0px;bottom:0px;left:0px;rigth:0px;overflow:scroll;"
  >
    <!-- 第零行，标题、返回按钮、问号图标 -->
    <v-row class="mt-n3">
      <v-col>
        <v-btn :to="{name:'home'}" class="mx-2" elevation="0" fab outlined x-small color="white">
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">个 人 中 心</h3>
      </v-col>
      <v-col>
        <v-dialog v-model="dialog" persistent width="330">
          <template v-slot:activator="{ on }">
            <v-row justify="end">
              <v-icon class="mr-4" v-on="on">mdi-help-circle</v-icon>
            </v-row>
          </template>
          <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>规则说明</v-card-title>
            <v-card-text>
              <b>一、等级规则</b>
              <p>绿色积分等级是根据在绿色积分领取界面累积申领的总分计算所得，不会因为兑换而降级。</p>
              <!-- <br> -->
              1：种子&nbsp;
              <v-icon color="lime">mdi-seed</v-icon>
              <br />
              <br />2：叶子&nbsp;
              <v-icon color="green">mdi-leaf</v-icon>
              <br />
              <br />3：树&nbsp;
              <v-icon color="light-green">mdi-tree</v-icon>
              <br />
              <br />1->...->1111->2111->2211->2221->2222->3222->3322->3332->3333
              <br />
              <br />
              <b>二、绑卡规则</b>
              <br />实名登记的公交卡，市民卡(开通公交刷卡功能)会默认绑定本人名下，如不是常用的，请手动绑定新卡。
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="primary" text @click="dialog = false">确定</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-col>
    </v-row>
    <!-- 第零行，问号图标
    <v-row justify="end">
      <v-icon class="mr-4">mdi-help-circle</v-icon>
    </v-row>-->

    <!-- 第一行，头像、等级、等级图标、进度条 -->
    <br>
    <v-row>
      <!-- 第一列，头像 -->
      <v-col cols="4">
        <v-avatar size="75" class="ml-6">
          <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" alt="John" />
        </v-avatar>
      </v-col>
      <!-- 第二列，昵称、等级图标 -->
      <v-col>
        <!-- 昵称 -->
        <v-row>
          <v-col>
            <div class="white--text font-weight-bold headline ml-n3 mt-n3">张小明</div>
          </v-col>
        </v-row>
        <v-row>
          <!-- 进度条 -->
          <v-col cols="10" class="mt-n8 ml-n2">
            <v-row>
              <v-col cols="2">
                <div class="white--text font-weight-black">Lv.3</div>
              </v-col>
              <v-col cols="6">
                <v-card flat height="20" class="green lighten-2">
                  <v-icon color="lime" small class="pb-2">mdi-seed</v-icon>
                  <v-icon color="lime" small class="pb-2">mdi-seed</v-icon>
                  <v-icon color="lime" small class="pb-2">mdi-seed</v-icon>
                  <!-- <v-icon color="red" small class="pb-2">mdi-fruit-watermelon</v-icon> -->
                </v-card>
              </v-col>
              <v-col cols="4">
                <div class="white--text caption d-flex justify-end align-end">128/1000</div>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12" class="mt-n6 ml-n1">
                <v-progress-linear color="cyan accent-2" height="10" value="10" striped></v-progress-linear>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
    <!-- 第二行，等级奖励 -->
    <br>
    <span class="white--text title font-weight-black">等级奖励</span>
    <!-- <span style="position:absolute;left:130px;top:229px;">
      <v-card flat height="22" width="270">
        <v-icon color="lime" small class="pb-1">mdi-seed</v-icon>
        <v-icon color="lime" small class="pb-1">mdi-seed</v-icon>
        <v-icon color="lime" small class="pb-1">mdi-seed</v-icon>
      </v-card>
    </span> -->
    <v-row>
      <v-col>
        <v-card>
          <v-row>
            <!-- 无左右按钮 -->
            <v-carousel
              :continuous="false"
              height="150"
              hide-delimiters
              :show-arrows="false"
              v-model="model"
            >
              <!-- 有左右按钮 -->
              <!-- <v-carousel :continuous="false" height="150" hide-delimiters> -->
              <v-carousel-item>
                <div
                  class="font-weight-bold headline"
                  style="position:absolute;left:50px;top:15px;"
                >Lv.1</div>
                <div>
                  <v-btn
                    style="position:absolute;right:40px;top:10px;"
                    class="grey white black--text"
                  >领取</v-btn>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:45px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      绿色
                      <br />积分
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+10</div>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:150px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      碳
                      <br />积分
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+1</div>
                </div>
              </v-carousel-item>
              <v-carousel-item>
                <div
                  class="font-weight-bold headline"
                  style="position:absolute;left:50px;top:15px;"
                >Lv.2</div>
                <div>
                  <v-btn
                    style="position:absolute;right:40px;top:10px;"
                    class="grey white black--text"
                  >领取</v-btn>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:45px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      绿色
                      <br />积分
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+50</div>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:150px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      碳
                      <br />积分
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+2</div>
                </div>
              </v-carousel-item>
              <v-carousel-item>
                <div
                  class="font-weight-bold headline"
                  style="position:absolute;left:50px;top:15px;"
                >Lv.3</div>
                <div>
                  <v-btn
                    style="position:absolute;right:40px;top:10px;"
                    class="grey white black--text"
                  >领取</v-btn>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:45px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      绿色
                      <br />积分
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+100</div>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:150px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      碳
                      <br />积分
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+4</div>
                </div>
              </v-carousel-item>
              <v-carousel-item>
                <div
                  class="font-weight-bold headline"
                  style="position:absolute;left:50px;top:15px;"
                >Lv.4</div>
                <div>
                  <v-btn style="position:absolute;right:40px;top:10px;" class="white black--text">领取</v-btn>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:45px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      绿色
                      <br />积分
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+150</div>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:150px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      碳
                      <br />积分
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+5</div>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:255px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      九折
                      <br />优惠券
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+1</div>
                </div>
              </v-carousel-item>
              <v-carousel-item>
                <div
                  class="font-weight-bold headline"
                  style="position:absolute;left:50px;top:15px;"
                >Lv.5</div>
                <div>
                  <v-btn style="position:absolute;right:40px;top:10px;" class="white black--text">领取</v-btn>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:45px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      绿色
                      <br />积分
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+200</div>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:150px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      碳
                      <br />积分
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+7</div>
                </div>
                <div
                  class="font-weight-medium body"
                  style="position:absolute;left:255px;bottom:8px;"
                >
                  <v-avatar color="green" size="60">
                    <span class="white--text">
                      九折
                      <br />优惠券
                    </span>
                  </v-avatar>
                  <div style="text-align:center;">+2</div>
                </div>
              </v-carousel-item>
            </v-carousel>
          </v-row>
          <v-divider></v-divider>
        </v-card>
      </v-col>
    </v-row>
    <!-- 第三行，绑卡 -->
    <br>
    <div class="white--text title font-weight-black">绑卡</div>
    <v-row>
      <v-col>
        <v-card>
          <!-- 新卡 -->
          <v-row v-show="showb">
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <span style="position:absolute;top:20px;">6227 **** **** **** 192</span>
            </v-col>
            <v-col cols="3">
              <v-btn rounded @click="tain()">解绑</v-btn>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <v-row style="height:80px;">
            <!-- <span class="ml-10 mt-7 font-weight-bold">输入卡号：</span> -->
            <v-col></v-col>
            <v-col cols="10">
              <span>
                <v-text-field label="输入卡号" clearable v-model="text"></v-text-field>
              </span>
            </v-col>
            <v-col></v-col>
          </v-row>
          <v-row>
            <v-col>
              <div class="text-center mt-n8">
                <v-btn
                  width="200"
                  rounded
                  color="green"
                  dark
                  class="mt-6 font-weight-bold"
                  @click="retain()"
                >绑定新卡</v-btn>
              </div>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
    <!-- 第四行，更多应用 -->
    <!-- <div class="white--text title font-weight-black">更多应用</div>
    <v-row>
      <v-col>
        <v-card>
          <v-row>
            <v-col cols="4">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title class="d-flex justify-center">小游戏</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="6" class="d-flex justify-start align-center">
              <div>+100</div>
            </v-col>
            <v-col cols="2" class="d-flex justify-start align-center">
              <v-btn icon :to="{name:'bikegame'}">
                <v-icon>arrow_forward</v-icon>
              </v-btn>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <v-row>
            <v-col cols="4">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title class="d-flex justify-center">绿色商城</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="6" class="d-flex justify-start align-center">
              <div>+100</div>
            </v-col>
            <v-col cols="2" class="d-flex justify-start align-center">
              <v-btn icon :to="{name:'Mall'}">
                <v-icon>arrow_forward</v-icon>
              </v-btn>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <v-row>
            <v-col cols="4">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title class="d-flex justify-center">抽奖大转盘</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="6" class="d-flex justify-start align-center">
              <div>+100</div>
            </v-col>
            <v-col cols="2" class="d-flex justify-start align-center">
              <v-btn icon>
                <v-icon>arrow_forward</v-icon>
              </v-btn>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <v-row>
            <v-col cols="4">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title style="font-size:20px;" class="d-flex justify-center">......</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="8"></v-col>
          </v-row>
          <v-divider></v-divider>
        </v-card>
      </v-col>
    </v-row> -->
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
      showb: false,
      model: 3,
      text: "",
    };
  },
  methods: {
    retain() {
      this.showb = true;
      this.text = "";
    },
    tain() {
      this.showb = false;
    }
  }
};
</script>

<style>
</style>